import React from "react";
import "../css/home.css";
import Gong from "../view/erji/gong";
import Guan from "../view/erji/guan";
import Xiao from "../view/erji/xiao";
import Jia from "../view/erji/jia";
import {
    Link, HashRouter, Switch, Route
} from "react-router-dom";
class Home extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            list: ["小米商城", "云服务", "天星数科", "有品", "小爱开放平台", "企业团购", "资质证照", "协议规则", "智能生活"],
            list1: ["小米手机", "红米", "电视", "笔记本", "路由器", "智能硬件", "服务", "社区", "蓝牙音箱"]
        }
    }
    render() {
        return (
            <div>
                <ul className="nav">
                    {this.state.list.map((element, index) => {
                        return <li key={index}>
                            {element}
                            
                        </li>
                    })
                    }
                    <p>消息通知</p>
                    <p>注册</p>
                    <p><Link to="/login">登录</Link></p>

                </ul>
                <ul className="nav1">
                    <div className="q1">
                    </div>
                    {
                        this.state.list1.map((element, index) => {
                            return <li key="index">
                                {element}
                            </li>
                        })
                    }
                    <div className="nav1-input">
                        <input type="text" placeholder="王一博同款手机" />
                        <p>🔍</p>
                    </div>
                </ul>
                <HashRouter>
                    <ul className="nav3">
                        <li><Link to="/home/gong">公司简介</Link><span className="span">|</span></li>
                        <li><Link to="/home/guan">管理团队</Link><span className="span">|</span></li>
                        <li><Link to="/home/xiao">小米文化</Link><span className="span">|</span></li>
                        <li><Link to="/home/jia">加入小米</Link></li>
                    </ul>
                </HashRouter>
                <div className="content">
                    <Switch>
                        <Route path="/home/guan" component={Guan} />
                        <Route path="/home/xiao" component={Xiao} />                  
                          <Route path="/home/jia" component={Jia} />            
                            <Route path="/home" component={Gong} />
                    </Switch>
                </div>
            </div>
        )
    }
    componentDidCatch() {
        console.log(this.props);
    }
}
export default Home;